<template>
  <div class="page-container">
    <div class="sidebar">
      <router-link :class="{active: $route.path === '/upload'}" to="/upload">图片上传</router-link>
      <router-link :class="{active: $route.path === '/pdfUpload'}" to="/pdfUpload">PDF文件管理</router-link>
      <router-link :class="{active: $route.path === '/logistics'}" to="/logistics">物流线路管理</router-link>
      <router-link :class="{active: $route.path === '/userManager'}" to="/userManager">用户管理</router-link>
    </div>
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
}

</script>

<style>
.page-container {
  display: flex;
}

.sidebar {
  background-color: #f4f4f4;
  width: 200px;
}

.sidebar a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
}

.sidebar a.active {
  background-color: lightblue;
}

.main-content {
  flex: 1;
  margin-left: 20px;
}
</style>